<template>
  <el-container class="main">
    <el-aside width="200px" :class="isFold ? 'asidesize' : ''">
      <div class="title">
        <div class="logo">
          <span :class="isFold ? 'none' : ''">就诊预约</span
          ><span
            class="iconfont icon-jiankang"
            @click="indexs"
            style="cursor: pointer"
            title="回到首页·"
          ></span
          ><span :class="isFold ? 'none' : ''">管理系统</span>
        </div>
        <div class="fold" @click="foldConfirm">|||</div>
      </div>
      <el-menu :collapse="isFold" :collapse-transition="false">
        <el-submenu :index="item1.id" v-for="item1 in menuList" :key="item1.id">
          <template slot="title">
            <i :class="item1.icon"></i>
            <span slot="title">{{ item1.name }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              :index="item2.id + ''"
              v-for="item2 in item1.children"
              :key="item2.id"
              @click="goPath(item2.path)"
              ><i :class="item2.icon"></i>{{ item2.name }}</el-menu-item
            >
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <div class="left">
          <ul>
            <el-tooltip
              class="item"
              effect="dark"
              :content="item.message"
              placement="bottom"
              v-for="item in menuIconList"
              :key="item.id"
            >
              <li :class="item.icon" @click="goPathes(item.path)"></li>
            </el-tooltip>
          </ul>
          <el-button
            type="warning"
            size="medium"
            style="border-radius: 5px; margin-left: 10px"
            @click="singOut"
            >退出系统</el-button
          >
        </div>
        <div class="right">
          <img src="./assets/img/headport.jpg" alt="" />
          <div>
            <span>今天是 2023年 5月 20日 </span><br />
            <span>天气：晴 气温：24℃ 风速：西南风 1-2级</span>
          </div>
        </div>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  // created () {
  //   this.formatterDateTime()
  // },
  data () {
    return {
      menuList: [],
      isFold: false,
      menuIconList: [
        { id: '1', icon: 'iconfont icon-xiaoxi color1', message: '病人信息列表', path: 'information_List' },
        { id: '2', icon: 'iconfont icon-tongzhi color2', message: '上门预约列表', path: 'consultation_Order' },
        { id: '3', icon: 'iconfont icon-huifu color3', message: '系统通知', path: 'home' },
        { id: '4', icon: 'iconfont icon-bianxie color4', message: '发送通知', path: 'announcement' }
      ],
      weatherInfo: {
        key: 'dec0a98bee5244c1b354a2c10f531e45',
        location: '101010100'
      }
    }
  },
  methods: {
    foldConfirm () {
      this.isFold = !this.isFold
    },
    singOut () {
      window.sessionStorage.setItem('token', '')
      window.sessionStorage.clear()
      this.$router.replace('/login')
    },
    goPath (path) {
      this.$router.replace('/' + path)
    },
    goPathes (path) {
      this.$router.push('/' + path)
    },
    indexs () {
      this.$router.replace('/home')
    }
  },
  mounted () {
    this.menuList = JSON.parse(window.sessionStorage.getItem('menu'))
  }
}
</script>

<style scoped>
@import url(//at.alicdn.com/t/font_2727952_dj3i81q2xs.css);
.main {
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(
    180deg,
    rgba(255, 0, 145, 0.08),
    rgba(170, 0, 255, 0.07)
  );
}
.main .title {
  width: 100%;
  height: 80px;
}
.title .logo {
  height: 56px;
  text-align: center;
  padding: 10px 10px;
  box-sizing: border-box;
}
.title .logo span {
  font-size: 35px;
  color: #f40;
}
.title .logo span:nth-child(1),
.title .logo span:nth-child(3) {
  color: darksalmon;
  font-size: 16px;
}
.none {
  display: none;
}
.title .fold {
  height: 24px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  color: crimson;
  transition: 0.3s;
  background-color: pink;
  line-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title .fold:hover {
  color: #000;
}
.asidesize {
  width: 80px !important;
  transition: 0.5s;
}
.el-menu {
  margin-top: 20px;
}
.color1 {
  color: aqua;
}
.color2 {
  color: chocolate;
}
.color3 {
  color: darkviolet;
}
.color4 {
  color: lightsalmon;
}
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid lightskyblue;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.el-header .left {
  height: 100%;
  display: flex;
  align-items: center;
}
.el-header .left ul {
  width: 240px;
  height: 40px;
  padding: 5px 10px;
  list-style: none;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid pink;
  border-radius: 20px;
}
.el-header .left ul li {
  width: 50px;
  height: 25px;
  font-size: 18px;
  line-height: 25px;
  padding: 2px 5px;
  text-align: center;
  cursor: pointer;
  transition: 0.3s;
}
.el-header .left ul li:hover {
  background-color: deepskyblue;
  border-radius: 13px;
}
.el-header .right {
  display: flex;
  align-items: center;
}
.el-header .right img {
  width: 70px;
  height: 70px;
  border-radius: 5px;
  margin-right: 10px;
  border: 2px solid paleturquoise;
}
.el-header .right div span {
  font-size: 12px;
  padding: 8px 0;
}
</style>
